<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>

	</head>
	<body>
		<div id="app">
			<!-- 普通元素 -->
			<p>{{message}}</p>

			<!-- 文本输入框 -->
			<input type="text" v-model="message" />

			<!-- 文本域 -->
			<textarea v-model="message"></textarea>

			<!-- 单选按钮 -->
			男<input type="radio" name="gender" value="0" v-model="sex" />
			女<input type="radio" name="gender" value="1" v-model="sex" />
			<p>选中的值为: {{sex}}</p>

			<!-- 多选按钮 -->
			AA<input type="checkbox" value="0" v-model="hobby" />
			BB<input type="checkbox" value="1" v-model="hobby" />
			CC<input type="checkbox" value="2" v-model="hobby" />
			<p>爱好为:{{hobby}}</p>
			
			<!-- 下拉菜单 -->
			<select v-model="op">
				<option value="">--请选择--</option>
				<option value ="0">选项一</option>
				<option value ="1">选项二</option>
				<option value ="2">选项三</option>
			</select>
			<p>选项为:{{op}}</p>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						message: "Hello",
						sex: 0,
						hobby: [],
						op : ""
					}
				},
				methods: {

				}
			});
		</script>
	</body>
</html>
